<template>
	<transition name="fade">
		<div class="x-alert-wrap" v-show="show">
			<div class="x-alert-content">
				<div class="alert-title">{{title}}</div>
				<div class="alert-msg">{{msg}}</div>
				<div class="alert-btn" v-if="type == 'confirm'">
					<div class="cancel-btn btn" @click="cnacel" v-html="cancelText"></div>
					<div class="confirm-btn btn" @click="confirm" v-html="confirmText"></div>
				</div>

				<!-- <div class="alert-btn">
					<div class="cancel-btn">取消</div>
					<div class="confirm-btn">确定</div>
				</div> -->

				<div class="alert-btn" v-if="type == 'alert'">
					<div class="confirm-btn btn" @click="confirm" v-html="confirmText"></div> 
				</div>
			</div>

			<div class="musk"></div>
		</div>
	</transition>
</template>

<script type="text/javascript">
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			type: {
				type: String,
				default: 'alert'
			},
			title: [String],
			msg: [String],
			cancelText: {
				type: String,
				default: '取消'
			},

			confirmText: {
				type: String,
				default: '确认'
			},
			
			cancelFn: {
				type: Function,
				default: () => {}
			},

			confirmFn: {
				type: Function,
				default: () => {}
			}
		},

		methods: {
			hideAlert() {
				this.$emit('hide-alert');
			},

			cancel() {
				this.hideAlert();
			},

			confirm() { 
				this.confirmFn();
				this.hideAlert(); 
			}
		}
	}
</script>

<style type="text/css" lang="scss">
	.x-alert-wrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10001;
		width: 100vw;
		height: 100vh;
		/*display: flex;
		align-items: center;
		justify-content: center;*/

		.musk {
			position: absolute;
			z-index: 1;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.4);
		}

		.x-alert-content {
			margin: -100px auto 0;
			position: relative;
			top: 50%;
			z-index: 2;
			width: 270px; 
			height: 140px;
			border-radius: 10px;
			background: #fff;
		}

		.alert-msg {
			width: 100%;
			height: 97px;
			padding: 20px 0 15px;
			font-size: 17px;
			text-align: center;
			display: flex; 
			justify-content: center;
			align-items: center;
		}

		.alert-btn {
			width: 100%;
			height: 43px;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			border-top: 1px solid #e6e6e6;

			.btn {
				flex: 1;
				height: 100%;
				font-size: 17px;
				display: flex;
				align-items: center;
				justify-content: center;

				&:nth-child(2) {
					border-left: 1px solid #e6e6e6;
				}
			}
		} 

		.confirm-btn {
			color: #2e9b64;
		}
	}
</style>